<template>
  <n-layout has-sider class="home-wrapper">
    <n-layout-sider
      show-trigger
      class="home-aside"
      collapse-mode="width"
      :collapsed-width="64"
      bordered
    >
      <div class="logo">BIU-NET</div>
      <n-scrollbar>
        <n-menu
          :options="menuOptions"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :default-value="(currentRoute.name as string)"
        />
      </n-scrollbar>
    </n-layout-sider>
    <n-layout style="background-color: transparent">
      <n-layout-header class="home-header" bordered>
        <n-breadcrumb separator=">">
          <n-breadcrumb-item
            v-for="name in (currentRoute.meta.breadcrumb as Array<string>)"
            :key="name"
          >
            {{ name }}
          </n-breadcrumb-item>
        </n-breadcrumb>
        <div style="display: flex; align-items: center">
          <theme style="margin-right: 10px" />
          <n-dropdown trigger="hover" :options="userDropdownOptions" @select="userDropdownSelect">
            <div class="user">
              超级管理员
              <n-icon :size="18" style="margin-left: 5px">
                <down-one />
              </n-icon>
            </div>
          </n-dropdown>
        </div>
      </n-layout-header>
      <n-layout-content :native-scrollbar="false" class="home-content">
        <div style="padding: 5px 20px">
          <router-view />
        </div>
      </n-layout-content>
      <n-layout-footer class="home-footer" bordered> Copyright © BIU-NET 2023</n-layout-footer>
    </n-layout>
    <change-password :show="showChangePassword" :close="() => (showChangePassword = false)" />
  </n-layout>
</template>

<script setup lang="ts">
import { type MenuOption, type DropdownOption, NIcon } from "naive-ui"
import router, { routes } from "@/router"
import { type Component, h, ref } from "vue"
import { type RouteRecordRaw, RouterLink, useRoute } from "vue-router"
import { DownOne, Logout, Key } from "@icon-park/vue-next"
import Theme from "@/components/theme/Index.vue"
import ChangePassword from "./ChangePassword.vue"
import { doLogout } from "../../api/passport-api"

const menuOptions = routes.map((r) => routeRecordRaw2MenuOption(r))

const currentRoute = useRoute()

function renderIcon(icon: Component | unknown) {
  if (!icon) {
    return
  }
  return () => h(NIcon, {}, () => h(icon, {}))
}

function renderLabel(routeRecordRaw: RouteRecordRaw) {
  if (routeRecordRaw.children && routeRecordRaw.children.length > 0) {
    return routeRecordRaw.meta?.title
  }
  return () =>
    h(
      RouterLink,
      {
        to: {
          name: routeRecordRaw.name
        }
      },
      { default: () => routeRecordRaw.meta?.title }
    )
}

function routeRecordRaw2MenuOption(routeRecordRaw: RouteRecordRaw): MenuOption {
  return {
    key: routeRecordRaw.name?.toString(),
    label: renderLabel(routeRecordRaw),
    icon: renderIcon(routeRecordRaw.meta?.icon),
    children: routeRecordRaw.children?.map((r) => routeRecordRaw2MenuOption(r))
  }
}

const userDropdownOptions = ref<Array<DropdownOption>>([
  {
    key: "change-password",
    label: "修改密码",
    icon: renderIcon(Key),
    onClick: () => {
      showChangePassword.value = true
    }
  },
  {
    key: "logout",
    label: "退出登陆",
    icon: renderIcon(Logout),
    onClick: () => {
      doLogout().then(() => {
        router.push({
          path: "/"
        })
      })
    }
  }
])

function userDropdownSelect(key: string | number, option: DropdownOption) {
  if ((option as any).onClick) {
    ;(option as any).onClick()
  }
}

const showChangePassword = ref(false)
</script>

<style scoped lang="scss">
@import "index.scss";
</style>
